<template>
    <div class="nr">
        <header>
            <a href="#" @click="rmloacl"></a>
            <p style="font-size:4.2667vw;">哔哩哔哩漫画</p>
        </header>
        <div class="fheader"></div>
        <nav v-if="!is && aa">
            <img :src="img">
            <h3 style="font-size:5.6667vw;">{{name}}</h3>
            <p style="font-size:4.2667vw;">{{lx}}</p>
        </nav>
        <main v-if="!is && aa">
            <div class=" up">
                <div class="zuiman" v-if="collection==1" @click="dy">
                    <span></span>
                    <span>追漫</span>
                </div>
                <div class="yizhui" v-if="collection==0" @click="undy">
                    <span></span>
                    <span>已追</span>
                </div>
                <router-link :to="{path:'/look', query:{caricatureId:caricatureId,hua:'01',name:name} }" class="look">
                    看第 {{kandao}} 话
                </router-link>
            </div>
            <div class="main">
                <h3>{{lz}}</h3>
                <p class="detail" v-if="isShowDetail">{{detail}} <span @click="showDetail($event)"> ^ </span></p>
                <div class="box1">
                    <h3>全部章节({{chapter}})</h3>
                    <span v-if="upORdown">
                        <p @click="upORdown=false">升序</p> <i></i>
                    </span>
                    <span v-if="!upORdown">
                        <p @click="upORdown=true">降序</p><i class="down"></i>
                    </span>
                </div>
                <div class="box2 unshow">
                    <router-link
                        :to="{path:'/look', query:{caricatureId:caricatureId,hua:p+1>99? p+1:p+1 > 9 ? `${p+1}`: `0${p+1}` , name:name} }"
                        v-for="(p,i) in arr " :key="i">
                        <span :data-hua=p> {{p+1>99? p+1:p+1 > 9 ? `0${p+1}`: `00${p+1}`}} </span>
                    </router-link>
                    <div class="nb8" @click="show($event)"><span>...</span></div>
                </div>
                <h3>讨论区 ({{sum}})</h3>
                <div class="box3">
                    <ul>
                        <li v-for="p in ping" :key="p.id">
                            <div id="up">
                                <img src="../assets/public/logo.png" alt="">
                                <div class="fr">
                                    <span>{{p.username}}</span>
                                    <span>{{p.time}}</span>
                                </div>
                            </div>
                            <div id="down">
                                <p>{{p.yl}}</p>
                            </div>
                        </li>
                        <router-link class="kuaiqu"
                            :to="{path:'/discuss', query:{caricatureId:caricatureId,name:name,img:img} }">快去讨论吧!
                        </router-link>
                    </ul>
                </div>
                <h4 class="caini">猜你喜欢</h4>
                <div class="box4">
                    <div v-for="p in tuijian" :key="p.id" @click="addlocal(p.caricatureId)">
                        <img :src="p.url" :alt="p.name">
                        <p>{{p.name}}</p>
                        <p>{{p.trend==2?`[完结]共${p.hua}话`:`更新至${p.hua}`}}</p>
                    </div>
                </div>
            </div>

        </main>
        <div class="none" v-if="!aa">
            <img src="../assets/public/deng.png" alt="">
            玩命加载中
        </div>
    </div>

</template>
<script>
const axios = require('axios');
const Qs = require('qs')
export default ({
    name: 'listNR',
    data() {
        return {
            url: `http://127.0.0.1/nr/mNr`,
            urlMH: 'http://127.0.0.1/nr/manhua',
            img: '',
            name: '',
            str: '',
            urlMHstr: '',
            type: '',
            trend: '',
            synopsis: '',
            chapter: '',
            detail: '',
            arr: '',
            is: true,
            collection: 1,
            upORdown: true,
            isShowDetail: true,
            arr: [],
            caricatureId: this.$route.query.caricatureId,
            aa: false,
            tuijian: '',
            ping: '',
            no: true,
            sum: '',
            kandao: '001',
            bookID: ''
        }
    },
    watch: {
        caricatureId: {
            immediate: true,//进入界面立即执行回调 
            handler() {
                Promise.resolve(this.setStr())
                    .then(() => {
                        this.getData()
                    }).then(() => {
                        this.is = false
                    })
            }
        },
        upORdown() {
            this.getArr();
        }
    },
    computed: {
        lx() {
            let type = this.type
            let str = ''
            if (type == '001') {
                return str = '热血'
            } else if (type == '002') {
                return str = '都市'
            } else if (type == '003') {
                return str = '奇幻'
            } else if (type == '004') {
                return str = '游戏电竞'
            } else if (type == '005') {
                return str = '悬疑灵异'
            } else if (type == '006') {
                return str = '西幻'
            } else if (type == '007') {
                return str = '都市'
            } else if (type == '008') {
                return str = '玄幻'
            } else if (type == '009') {
                return str = '悬疑'
            } else if (type == '010') {
                return str = '历史'
            } else if (type == '011') {
                return str = '武侠仙侠'
            } else if (type == '012') {
                return str = '架空'
            } else if (type == '013') {
                return str = '青春'
            } else if (type == '014') {
                return str = '现代'
            } else if (type == '015') {
                return str = '正能量'
            } else if (type == '016') {
                return str = '科幻'
            }
        },
        lz() {
            if (this.trend == 2) {
                return '连载中'
            } else {
                return '完结'
            }
        }
    },
    methods: {
        getData() {
            fetch(this.url,
                {
                    method: 'post',
                    headers: { 'content-type': 'application/x-www-form-urlencoded' },
                    body: this.str
                }
            )
                .then(response => response.json())
                .then(data => {
                    this.img = data[0].url;
                    this.name = data[0].name;
                    this.type = data[0].type;
                    this.trend = data[0].trend;
                    this.synopsis = data[0].synopsis;
                    this.chapter = data[0].chapter;
                    this.detail = data[0].detail;
                    this.getArr()
                    if (data.status != 1) {
                        this.aa = true
                    }
                })
        },
        setStr() {
            this.str = 'caricatureId=' + this.caricatureId
        },
        showDetail(e) {
            let el = e.target.parentNode
            el.className = 'showDetail'
        },
        getArr() {
            let up = []
            let down = []
            for (let i = 0; i < this.chapter; i++) {
                up.push(i)
                down.unshift(i)
            }
            if (this.upORdown) {
                this.arr = up
            } else {
                this.arr = down
            }
        },
        show(e) {
            let el = e.target
            el.style['display'] = 'none'
            el.parentNode.className = 'box2'
            el.parentNode.style['height'] = '100%'
        },
        getallM() {
            let data = {
                "tuijian": "tuijian",
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1:80/nr/allM`,
                data: Qs.stringify(data)
            }).then((data) => {
                    this.tuijian = data.data
                }).catch((err) => {
                    console.log(err);
                })
        },
        getping() {
            let data = {
                "caricatureId": this.caricatureId,
                "tui": "tui"
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1/pingluen/pin`,
                data: Qs.stringify(data)
            })
                .then((data) => {
                    if (data.data.status == 1) {
                        this.ping = null
                    } else {
                        this.ping = data.data
                    }
                }).catch((err) => {
                    console.log(err);
                })

            let str = {
                "caricatureId": this.caricatureId,
                "sum": "sum"
            }
            axios({
                method: 'post',
                url: `http://127.0.0.1/pingluen/pin`,
                data: Qs.stringify(str)
            }).then((data) => {
                this.sum = data.data.msg
            })
        },
        getzhu() {
            let data = {
                inquire: 'inquire',
                caricatureId: this.caricatureId
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1/user/shujia',
                data: Qs.stringify(data)
            }).then((data) => {
                if (data.data.length == 1) {
                    this.collection = 0
                    this.kandao = data.data[0].kandao
                    this.bookID = data.data[0].bookid
                }
            }).catch((err) => {
                console.log(err);
            })
        },
        dy() {
            let data = {
                set: 'set',
                caricatureId: this.caricatureId
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1/user/shujia',
                data: Qs.stringify(data)
            }).then((data) => {
                this.collection = 0
            }).catch((err) => {
                console.log(err);
            })
        },
        undy() {
            let data = {
                del: 'del',
                bookid: this.bookID
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1/user/shujia',
                data: Qs.stringify(data)
            }).then((data) => {
                this.collection = 1
            }).catch((err) => {
                console.log(err);
            })
        },
        addlocal(id) {
            localStorage.setItem("caricatureId", id, 100);
            location.reload();
        },
        rmloacl() {
            localStorage.removeItem("caricatureId");
            window.location.href = "/"
        }
    },
    mounted() {
        this.getallM()
        this.getping()
        this.getzhu()
        let val = localStorage.getItem("caricatureId")
        if (val != undefined) {
            this.caricatureId = val
        }
    },
})
</script>
<style lang="less" scoped>
* {
    caret-color: transparent;
}

a {
    text-decoration: none;
    color: black;
}

ul {
    list-style: none;
}

.nr {
    position: relative;
    top: -12.5333vw;
}

.fheader {
    height: 12.2667vw;
}

header {
    position: fixed;
    top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    height: 12.2667vw;
    z-index: 99999999;
    background-color: white;

    a {
        width: 6.4vw;
        height: 6.4vw;
        margin: 0 2.6667vw;
        background: url(../assets/public/箭头.svg);
        background-size: 100% auto;
        transform: rotate(180deg);
    }

    p {
        position: absolute;
        right: 50%;
        transform: translateX(50%);
    }
}

nav {
    position: relative;
    width: 100%;

    img {
        width: 100%;
        height: auto;
    }

    h3 {
        position: absolute;
        bottom: 13.8667vw;
        left: 2.6667vw;
        color: white;
        text-shadow: .5333vw .5333vw 1.3333vw black;
        font-weight: 500;
        margin: 0;
    }

    p {
        position: absolute;
        bottom: 4.8667vw;
        left: 2.6667vw;
        color: white;
        text-shadow: .5333vw .5333vw 1.3333vw black;
        margin: 0;
    }
}

main {
    margin-top: 4vw;

    .up {
        display: flex;
        justify-content: space-between;

        .zuiman,
        .yizhui {
            display: flex;
            align-items: center;
            justify-items: center;
            margin-left: 2.6667vw;

            span:nth-of-type(1) {
                background: url(../assets/public/star.svg);
                display: block;
                width: 8.5333vw;
                height: 8.5333vw;
            }

            span:nth-of-type(2) {
                font-size: 5.1vw;
            }
        }

        .yizhui {
            span:nth-of-type(1) {
                background: url(../assets/public/onStar.svg);
                display: block;
                width: 8.5333vw;
                height: 8.5333vw;
            }
        }

        .look {
            width: 56vw;
            height: 11.7333vw;
            line-height: 11.7333vw;
            text-align: center;
            color: white;
            background-color: #f97399;
            font-size: 3.7667vw;
            border-radius: 5.3333vw;
            margin-right: 5.3333vw;
        }
    }

    .main {
        padding: 0 2.6667vw;

        .detail {
            position: relative;
            font-size: 3.2vw;
            color: #b5b5b5;
            height: 8.8vw;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;

            span {
                position: absolute;
                bottom: 0rem;
                right: 0rem;
                padding-right: 1.3333vw;
                margin-left: 5.3333vw;
                display: inline-block;
                transform: rotate(180deg);
            }
        }

        .showDetail {
            font-size: 3.2vw;
            color: #b5b5b5;
            width: 100%;

            span {
                display: none;
            }
        }

        .box1 {
            margin-bottom: 2.6667vw;
            display: flex;
            height: 5.3333vw;

            h3 {
                font-weight: 500;
                width: 26.6667vw;
                font-size: 4.3333vw;
                float: left;
                width: 556%;
                margin: 0;
            }

            span {
                display: flex;
                width: 100%;
                font-size: 4.2667vw;
                color: #b5b5b5;
                float: right;
                line-height: 5.3333vw;
                align-items: center;

                i {
                    display: block;
                    width: 4.2667vw;
                    height: 4.2667vw;
                    background: url(../assets/public/上下.svg);
                    background-size: 100% 100%;
                }

                .down {
                    transform: rotate(180deg);
                }

            }
        }

        .unshow {
            overflow: hidden;
        }

        .box2 {
            position: relative;
            width: 91.7333vw;
            height: 25.3333vw;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;

            .nb8 {
                position: absolute;
                top: 13.1733vw;
                right: 1.12vw;
                z-index: 999999;
                background-color: white;
            }

            a,
            .nb8 {
                width: 21.3333vw;
                height: 10.1333vw;
                text-align: center;
                line-height: 10.1333vw;
                border: #cccccc .2667vw solid;
                margin-bottom: 2.5333vw;
                border-radius: 1.3333vw;

                span {
                    color: black;
                    font-size: 3.7333vw;
                }
            }
        }

        .box3 {
            overflow-x: auto;
            white-space: nowrap;

            ul {
                display: flex;


                li {
                    width: 66.6667vw;
                    height: 31.4667vw;
                    border: #eeeeee solid .05rem;
                    padding: 3.2vw;
                    margin-right: 2.9333vw;
                    flex-shrink: 0;
                    justify-items: none;

                    #up {
                        display: flex;

                        img {
                            width: 8.5333vw;
                            height: 8.5333vw;
                            border-radius: 50%;
                            margin-right: 1.3333vw;
                        }

                        span {
                            color: '#959595';
                            display: block;
                            font-size: 4.2667vw;
                        }

                        span:nth-of-type(2) {
                            font-size: 3.2vw;
                        }
                    }

                    #down {
                        p {
                            text-align: justify;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-line-clamp: 3;
                            -webkit-box-orient: vertical;
                        }
                    }
                }

                .kuaiqu {
                    display: block;
                    background-color: #f5f7f8;
                    line-height: 38.4667vw;
                    text-align: center;
                    color: #f9799d;
                    padding: 0 10.6333vw;
                }
            }
        }

        .caini {
            font-size: 5.3333vw;
            font-weight: 500;
            margin-bottom: 0;
        }

        .box4 {
            width: 30.6667vw;
            width: 95%;
            margin: 0 auto;
            display: grid;
            margin-top: 2.6667vw;
            grid-template-columns: 1fr 1fr 1fr;
            padding-bottom: 10.6667vw;

            div {
                width: 29.8667vw;
                height: 51.2vw;
                color: black;

                p {
                    margin: 0;
                }

                p:nth-of-type(1) {
                    font-size: 3.7333vw;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                p:nth-of-type(2) {
                    margin-top: 1.3333vw;
                    font-size: 3.2vw;
                    color: #6c7482;
                }

                img {
                    display: block;
                    width: 27.4667vw;
                    height: 37.0667vw;
                    margin: 0 auto;
                }
            }
        }
    }
}

.none {
    width: 53.3333vw;
    height: 26.6667vw;
    color: #b5b5b5;
    font-size: 5.3333vw;
    margin: 5rem auto;
    line-height: 26.6667vw;
    text-align: center;

    img {
        width: 59.7333vw;
        height: 49.6vw;
    }
}
</style>